<template>
  <div class="addlist">
    <div class="input">
            <input type="text" placeholder="输入任务名称" v-model="text"> 
            <span @click="add">增加</span>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            text:'',
        }
    },
    methods:{
        add(){
            if(this.text){
                this.$store.commit('addTask',this.text);
            }else{
                alert('请输入任务名称')
            }
        }
    }
}
</script>

<style lang='scss' scoped>
    .input{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }
    .input input{
        height: 40px;
        width: 80%;
        border: none;
        outline: none;
        padding-left: 20px;
        background-color: #f5f5f5;
    }
    .input span{
        line-height: 40px;
        margin: 0 8px;
    }
</style>